<template>
	<div class="showBox">
		<textarea placeholder="想和大家说..."></textarea>
		<div class="uploadimg">
			<el-upload action="https://jsonplaceholder.typicode.com/posts" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
				<i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog v-model="dialogVisible" size="tiny">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		</div>
		<div class='addresspart'>
			<!--<div class="addressmain">
				<span v-if="!flag">
					<img class="img1" src="../../../../static/assets/images/circle/29-30-34/1-1.png" alt="" />				
				</span>
				<span v-else-if="flag">
					<img class="img1" src="../../../../static/assets/images/circle/29-30-34/1-2.png" alt="" />				
				</span>
				<span v-if="!flag">插入位置</span>
				<img @click="addaddress" class="img2" src="../../../../static/assets/images/circle/29-30-34/crjt.png" alt="" />	
			</div>-->
			<el-cascader
			  :options="options"
			  change-on-select
			  :placeholder='placeholder'
			></el-cascader>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				flag: false,
				placeholder:"插入位置",
				options: [
					{
						value: 'beijing',
						label: '北京',
						children: [
							{
								value: 'haidianqu',
								label: '海淀区',
								children: [
									{
										value: 'xisanqi',
										label: '西三旗'
									},
									{
										value: 'huilongguan',
										label: '回龙观'
									}, 
									{
										value: 'longze',
										label: '龙泽'
									}, 
									{
										value: 'anningzhuang',
										label: '安宁庄'
									}
								]
							}, 
							{
								value: 'tonzhouqu',
								label: '通州区',
								children: [
								{
									value: 'xinhuaxijie',
									label: '新华西街'
								}, 
								{
									value: 'beiyuan',
									label: '北苑'
								}]
							}
						]
					},
					{
						value: 'hebei',
						label: '河北',
						children: [
							{
								value: 'baoding',
								label: '保定',
								children: [
								{
									value: 'nanshiqu',
									label: '南市区'
								}, 
								{
									value: 'hebeinongyedaxue',
									label: '河北农业大学'
								}, 
								{
									value: 'xinshiqu',
									label: '新市区'
								}]
							}, 
							{
								value: 'shijiazhaugn',
								label: '石家庄',
								children: [
								{
									value: 'yuhualu',
									label: '裕华路'
								}, 
								{
									value: 'zhognshanlu',
									label: '中山路'
								}, 
								{
									value: 'zhaoxain',
									label: '赵县'
								},
								{
									value: 'luquna',
									label: '鹿泉'
								}]
							}, 
							{
								value: 'tangshan',
								label: '唐山',
								children: [
								{
									value: 'xinhuaxidao',
									label: '新华西道'
								}, 
								{
									value: 'nanxin',
									label: '南新'
								}, 
								{
									value: 'weiguobwilu',
									label: '卫国北路'
								}, 
								{
									value: 'xingyuandao',
									label: '兴源道'
								}]
							}, 
						]
					}
				]
			}
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			addaddress() {
				this.flag = true
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.showBox {
		position: relative;
		font-size: 30/@current;
		textarea {
			width: 100%;
			height: 600/@current;
			outline: none;
			font-size: 30/@current;
			color: #313131;
			resize: none;
			border: none;
			padding: 40/@current;
			box-sizing: border-box;
		}
		textarea::-webkit-input-placeholder {
			font-size: 30/@current;
			color: #7b7781;
		}
		.addresspart {
			padding: 30/@current 40/@current 20/@current 40/@current;
			.addressmain {
				border: 1/@current solid #D1CBDC;
				padding: 20/@current;
				border-radius: 10/@current;
				color: #767781;
				font-size: 26/@current;
				.img1 {
					width: 35/@current;
					height: 45/@current;
					vertical-align: middle;
					margin-right: 18/@current;
				}
				.img2 {
					width: 24/@current;
					height: 24/@current;
					vertical-align: middle;
					margin-right: 10/@current;
					margin-top: 10/@current;
					float: right;
				}
			}
		}
	}
</style>
<style lang="less">
	@current: 100rem;
	.uploadimg {
		position: absolute;
		top: 400/@current;
		left: 40/@current;
		.el-upload {
			width: 160/@current;
			height: 160/@current;
			position: relative;
			i {
				position: absolute;
				top: 50/@current;
				left: 50/@current;
			}
		}
		.el-upload-list__item {
			width: 160/@current;
			height: 160/@current;
		}
	}
	.el-cascader {
    	width: 100%;
    	.el-input__inner{
    		height: 80/@current;
    		line-height: 80/@current;
    		background: #F2EEF9;
    	}
    	.el-cascader__label{
    		height: 80/@current;
    		line-height: 80/@current;
    	}
    }
    /*.el-input{
    	input::-webkit-input-placeholder{ 
	　		color:#A54BE8;
		}
    }*/
    
</style>